<style>
    .account-stat-num{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-around;}
	.account-stat-num > div{font-size:16px; text-align:center;}
	.account-stat-num > div span{display:block; font-size:30px; font-weight:bold;}
	.control-label{text-align: right;}
</style>
<div class="container-fluid">
    <div class="row" style="min-width: 800px;">
        <div class="col-lg-12">
            <div class="card" style="margin-top: 10px;">
                <div class="card-header bg-primary text-white">筛选</div>
                <div class="card-body">
                    <div action="" method="get" class="row g-3 form-horizontal" role="form">
                        <div class="form-group">
                            <div class="row">
                            	<label class="col-md-1 control-label">订单时间</label>
                                <div class="col-md-4">
                                    <div class="input-group" data-provide="datepicker">
                                        <span class="input-group-text">从</span>
                                        <input type="text" class="form-control" readonly id="startTime" value="{{$startTime}}" placeholder="开始时间">
                                        <span class="input-group-text">至</span>
                                        <input type="text" class="form-control" readonly id="endTime" value="{{$endTime}}" placeholder="结束时间">
                                  	</div>
                                </div>
                                <label class="col-md-1 control-label">订单类型</label>
                                <div class="col-md-2">
                                    <select class='form-control' id='status'>
                                    	<option value='0'>全部类型</option>
                                    	<option value='1'>产品订单</option>
                                    	<option value='2'>升级订单</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <button class="btn btn-default" onclick="onSearch()"><i class="fa fa-search"></i> 搜索</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                	<div class='account-stat-num'>
                		<div><span>*</span>累计交易额</div>
                		<div><span>*</span>累计手续费</div>
                		<div><span>*</span>累计成本支出</div>
                		<div><span>*</span>累计佣金支出</div>
                		<div><span>*</span>累计利润</div>
                	</div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div> 

<style>
.control-label {
    padding-top: 7px;
}
</style>

<script>

var columns = [
{
    field: 'ordersn',
    title: "订单号",
    formatter: function(value,item){
    	return "<a href='/SPAdmin/order?orderno="+item.ordersn+"' target='_blank'>"+item.ordersn+"</a>"
    }
},{
    field: 'type',
    title: '订单类型',
    formatter: function(value,item){
    	if (item.type == 'level') return '<span class="badge bg-warning">升级订单</span>';
    	else return '<span class="badge bg-info">产品订单</span>';
    }
},{
    field: 'price',
    title: '订单金额',
},{
    field: 'fee',
    title: '手续费'
}, {
    field: 'costprice',
    title: '成本支出',
}, {
    field: 'reback',
    title: '佣金支出',
}, {
    field: 'profile',
    title: '订单利润',
}, {
    field: 'createtime',
    title: '订单时间',
}];
$('#table').bootstrapTable({
    url: '/SPAdmin/bill',
    dataType: 'json',
	method: 'post',
    pagination: true,//开启分页
    pageSize:30,
    pageNumber:1,
    sidePagination:'server',
    search: false, //开启刷选
    columns: columns,
    queryParams:function(params) {
        /******获取分页数据时，这里你可以带上你自定义的参数,bootstrap table会把这些参数合并到请求里******/
        params.startTime = $('#startTime').val();
        params.endTime = $('#endTime').val();
        params.status = $('#status').val();
        return params;
	},
});
getData();

/* 搜索按钮 */
function onSearch(){
	$('#table').bootstrapTable('refresh');
	getData();
}

function getData(){
	$.ajax({
		url:'',
		type:'post',
		data:{op:'stat',startTime: $('#startTime').val(),endTime: $('#endTime').val(),status: $('#status').val()},
		dataType:'json',
		success:function(r){
			for(var i in r.stat) $('.account-stat-num span').eq(i).html('￥'+r.stat[i]);
		}
	});
}

function onExport(){
	location.href = "/Admin/bill/export?startTime="+$('#startTime').val()+"&endTime="+$('#endTime').val();
}
</script>